<template>
  <div class="order-list">
    <p>订单列表:</p>
    <div class="order-item" v-for="i in store.orders" :key="i.id">
      <div class="img-box">
        <img :src="i.url" alt="" />
      </div>
      <div class="order-info">
        <p>{{ i.name }}</p>
        <p class="price">￥{{ i.price }}</p>
      </div>
    </div>
  </div>
  <div class="sum-bottom">
    <div class="sum">
      <p>
        已选 {{ store.orders.length }} 件商品，共计：{{
          store.totalPrice.toFixed(1)
        }}元
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ordersStore } from "../store";

const store = ordersStore();
</script>

<style scoped>
.order-list {
  padding: 20px 10px 70px;
}
.order-item {
  display: flex;
  padding: 10px;
  box-shadow: 0 0 5px #ccc;
  margin-bottom: 10px;
}

.img-box {
  width: 200px;
  height: 100px;
}

.img-box img {
  width: 100%;
  height: 100px;
}

.order-info {
  padding-left: 10px;
}

.order-info .price {
  font-weight: 500;
  color: #ff6600;
}

.sum-bottom {
  position: absolute;
  background-color: white;
  bottom: 0;
  width: 100%;
  box-shadow: 0 -3px 5px #ccc;
  text-align: right;
}

.sum-bottom .sum {
  padding: 0 20px;
  font-size: 20px;
  color: #ff6600;
}
</style>
